<template>
	<view class="feedback-container">
		<div :style="{
	  	height:`${statusBarHeight}px`,
	  	background:'#2f9aff'
	  }"></div>
		<view :style="{height: `${topHeight}px`,paddingLeft:`${pagePadding}px`,paddingRight:`${pagePadding}px`}">
			<view class="personal-title">
				<i class="clearIcon" @click="goBack"></i>
				<text>意见反馈</text>
			</view>
		</view>
		<view class="form-container">
			<!-- 联系信息模块 -->
			<view class="form-module">
				<view class="form-row">
					<text class="section-title">联系人姓名</text>
					<view class="form-item">
						<input class="input" type="text" v-model="formData.name" placeholder="请输入姓名"
							placeholder-class="placeholder" />
					</view>
				</view>

				<view class="divider"></view>
				<view class="form-row">
					<text class="section-title">联系电话</text>
					<view class="form-item">
						<input class="input" type="number" v-model="formData.phone" placeholder="请输入联系电话"
							placeholder-class="placeholder" />
					</view>
				</view>

				<view class="divider"></view>
				<view class="form-row">
					<text class="section-title">联系地址</text>
					<view class="form-item">
						<input class="input" type="text" v-model="formData.address" placeholder="请输入联系地址"
							placeholder-class="placeholder" />
					</view>
				</view>
			</view>

			<!-- 反馈描述模块 -->
			<view class="form-module">
				<view class="form-row-vertical">
					<text class="section-title">反馈描述</text>
					<view class="form-item">
						<textarea class="textarea" v-model="formData.content" placeholder="说说您的建议或问题，以便我们提供更好的服务。"
							placeholder-class="placeholder" />
					</view>
				</view>
			</view>

			<!-- 照片上传模块 -->
			<view class="form-module">
				<view class="upload-section">
					<view class="section-title">上传照片</view>
					<view class="upload-tip">最多可上传9张</view>
					<view class="upload-list">
						<view class="upload-item" v-for="(item, index) in formData.images" :key="index">
							<image :src="item" mode="aspectFill"></image>
							<view class="delete-btn" @tap="deleteImage(index)">×</view>
						</view>
						<view class="upload-btn" @tap="chooseImage" v-if="formData.images.length < 9">
							<text class="plus">+</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn" @tap="submitFeedback">
			提交反馈
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'

	const statusBarHeight = ref(0); // 状态栏高度
	const topHeight = ref(0); // 胶囊高度
	const pagePadding = ref(0);

	// 表单数据
	const formData = reactive({
		name: '',
		phone: '',
		address: '',
		content: '',
		images: []
	})
	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度

		const res = uni.getMenuButtonBoundingClientRect();
		pagePadding.value = systemInfo.screenWidth - res.right
		topHeight.value = res.height + (res.top - statusBarHeight.value) * 2
	});
	// 选择图片
	const chooseImage = () => {
		uni.chooseImage({
			count: 9 - formData.images.length,
			success: (res) => {
				formData.images.push(...res.tempFilePaths)
			}
		})
	}

	// 删除图片
	const deleteImage = (index) => {
		formData.images.splice(index, 1)
	}
	// 处理页面跳转
	const goBack = (type) => {
		uni.navigateBack()
	}
	// 提交反馈
	const submitFeedback = () => {
		// 这里添加表单验证和提交逻辑
		if (!formData.name) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			})
			return
		}
		if (!formData.phone) {
			uni.showToast({
				title: '请输入联系电话',
				icon: 'none'
			})
			return
		}
		// 提交数据
		console.log('提交的数据：', formData)
	}
</script>

<style lang="scss">
	.personal-title {
		height: 100%;
		font-size: 38rpx;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.clearIcon {
			position: absolute;
			height: 100%;
			width: 60rpx;
			background: url(/static/images/my/ic_fanhui@2x.png)no-repeat center;
			background-size: 35%;
			left: 0;
			top: 0;
		}
	}

	.feedback-container {
		min-height: 100vh;
		background-color: #F7F7F7;
		padding: 0;
	}

	.form-container {
		padding: 0;

	}

	.form-module {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 0 32rpx;
	}

	.form-row {
		display: flex;
		align-items: center;
		min-height: 100rpx;
		padding: 20rpx 0;
	}

	.section-title {
		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
		width: 172rpx;
		flex-shrink: 0;
	}

	.form-item {
		flex: 1;

		.input {
			width: 100%;
			height: 44rpx;
			font-size: 28rpx;
			background: none;
			padding: 0;
		}

		.textarea {
			width: 100%;
			height: 200rpx;
			font-size: 28rpx;
			background: none;
			padding: 0;
		}
	}

	.form-row-vertical {
		padding: 24rpx 0;

		.section-title {
			margin-bottom: 24rpx;
		}
	}

	.divider {
		height: 1rpx;
		background-color: #EEEEEE;
		margin: 0;
	}

	.placeholder {
		color: #999999;
	}

	.upload-section {
		padding: 24rpx 0;

		.upload-title {
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 16rpx;
		}

		.upload-tip {
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 24rpx;
		}

		.upload-list {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;
		}

		.upload-item,
		.upload-btn {
			width: 160rpx;
			height: 160rpx;
			background-color: #F7F7F7;
			border-radius: 8rpx;
		}

		.upload-item {
			position: relative;

			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}

			.delete-btn {
				position: absolute;
				right: -10rpx;
				top: -10rpx;
				width: 32rpx;
				height: 32rpx;
				background-color: rgba(0, 0, 0, 0.6);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				color: #FFFFFF;
				font-size: 28rpx;
				z-index: 1;
				line-height: 1;
			}
		}

		.upload-btn {
			border: 2rpx dashed #DDDDDD;
			display: flex;
			align-items: center;
			justify-content: center;

			.plus {
				font-size: 48rpx;
				color: #999999;
				line-height: 1;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.submit-btn {
		width: calc(100% - 64rpx);
		height: 88rpx;
		margin: 48rpx 32rpx;
		background-color: #07C160;
		font-size: 32rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;

		&:active {
			opacity: 0.9;
		}
	}
</style>